<!DOCTYPE html>
<html>
<head lang="zh_cn">
<meta charset="	UTF-8">
<title>WebSocket</title>
</head>
<body>

	<h1 id="message"></h1>
	<input id="text" type="text" >
	<button onclick="send()">发送消息</button>
	<button onclick="closeWebSocket()">关闭WebSocket连接</button>

	<script type="text/javascript">
		var websocket = null;
		//判断当前浏览器是否支持WebSocket
		if ('WebSocket' in window) {
			websocket = new WebSocket("ws://localhost:12345/websocket/api/websocket/111");
		} else if ('MozWebSocket' in window) {
			websocket = new MozWebSocket("ws://localhost:12345/websocket/api/websocket/111");
		} else {
			alert('当前浏览器 Not support websocket')
		}

		//连接发生错误的回调方法
		websocket.onerror = function() {
			setMessageInnerHTML("WebSocket连接发生错误");
		};

		// 连接成功建立的回调方法
		websocket.onopen = function() {
			console.log(websocket)
			// 0:未连接;1:已链接;2:连接正在关闭;3:连接已关闭
			console.log(websocket.readyState === websocket.OPEN)
			// 0
			console.log(websocket.CONNECTING)
			// 1
			console.log(websocket.OPEN)
			// 2
			console.log(websocket.CLOSING)
			// 3
			console.log(websocket.CLOSED)
			setMessageInnerHTML("WebSocket连接成功");
		}

		// 接收消息的回调方法
		websocket.onmessage = function(event) {
			setMessageInnerHTML(event.data);
		}

		// 连接关闭的回调方法
		websocket.onclose = function() {
			setMessageInnerHTML("WebSocket连接关闭");
		}

		// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
		window.onbeforeunload = function() {
			closeWebSocket();
		}

		//将消息显示在网页上
		function setMessageInnerHTML(innerHTML) {
			document.getElementById('message').innerHTML += innerHTML + '<br/>';
		}

		//关闭WebSocket连接
		function closeWebSocket() {
			websocket.close();
		}

		//发送消息
		function send() {
			var message = document.getElementById('text').value;
			websocket.send(message);
		}
	</script>
</body>
</html>